<template>
	<view class="content">
		
		<view style="display: flex;justify-content: center;">
			<view class="imageBox"><image :src="item.url" mode="" class="imageItem" @mouseenter="mouseenter(item)" @mouseleave="mouseleave(item)" v-for="(item, index) in images" :key="index" :style="{ filter: item.filter, height: item.height }"></image></view>
		</view>
		<view class="bottom">
			<view class="titleBox">
				<view class="titleLeft">
					Route map
				</view>
				<view class="titleRight">
					Route planning You and I co-created the DAO community
				</view>
			</view>
			<view class="value">
				<view class="valueLeft">
					Route planning You and I co-created the DAO community
				</view>
				<view class="valueRight">
					<view class="Socoals">
						Socoals
					</view>
					<view class="cast" @click="cast()">
						cast
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			title: 'Hello',
			images: [
			        {
			          url: "/static/home/homeImg1.png",
			          filter: 'grayscale(100%)',
			          height: '826px'
			        },
			        {
			          url: "/static/home/homeImg2.png",
			          filter: 'grayscale(100%)',
			          height: '826px'
			        }, {
			          url: "/static/home/homeImg3.png",
			          filter: 'grayscale(100%)',
			          height: '826px'
			        }, {
			          url: "/static/home/homeImg4.png",
			          filter: 'grayscale(100%)',
			          height: '826px'
			        }, {
			          url: "/static/home/homeImg5.png",
			          filter: 'grayscale(100%)',
			          height: '826px'
			        },
			      ]
		};
	},
	onLoad() {
		uni.getSystemInfo({
			success: function (res) {
				console.log(res.screenWidth)
			}
		});
	},
	methods: {
		mouseenter(item) {
			item.filter = 'grayscale(0)';
			item.height = '869px';
		},
		mouseleave(item) {
			item.filter = 'grayscale(100%)';
			item.height = '826px';
		},
		cast(){
			this.$tools.navigate('/pages/info/index')
		}
	}
};
</script>

<style scoped lang="scss">
.content {
	position: relative;
	background: url('/static/honeBg.png') no-repeat;
	background-size: 100% 100%;
	height: 100vh;

		// min-height: 1080px;
		// min-width: 1250px;
}
.imageBox {
	// position: relative;
	display: flex;
	.imageItem {
		// position: absolute;
		margin: 0 24px;
		width: 251px;
		transition: height 0.5s;
	}
}
.bottom{
	position: absolute;
	bottom: 0;
	width: 100%;
	.titleBox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 28px;
		.titleLeft{
			font-family: 'Frizon';
			color: #D4D5D0;
			font-size: 70px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			margin-left: 62px;
		}
		.titleRight{
			color: #D4D5D0;
			text-align: right;
			font-family: "Dela Gothic One";
			font-size: 40px;
			font-style: normal;
			font-weight: 400;
			line-height: normal;
			width: 714px;
			margin-right: 62px;
		}
	}
	.value{
		height: 81px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-top: 2px solid rgba(212, 213, 208, 0.2);
		.valueLeft{
			font-family: 'Montserrat';
			color: #D4D5D0;
			text-align: right;
			font-size: 20px;
			font-style: normal;
			font-weight: 300;
			line-height: normal;
			padding-left: 48px;
		}
		.valueRight{
			display: flex;
			.Socoals{
				display: flex;
				align-items: center;
				height: 81px;
				width: 370px;
				color: #D4D5D0;
				font-family: "Dela Gothic One";
				font-size: 24px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				background: #252525;
				justify-content: center;
			}
			.cast{
				display: flex;
				align-items: center;
				height: 81px;
				width: 370px;
				color: #D4D5D0;
				font-family: "Dela Gothic One";
				font-size: 24px;
				font-style: normal;
				font-weight: 400;
				line-height: normal;
				background: #F16D39;;
				justify-content: center;
			}
		}
	}
}
</style>
